用 OpenAI 官方 figma Skill，把 Figma 设计拉进 AI 编程工作流
介绍 OpenAI curated 的 figma Skill：它如何配合 Figma MCP（mcp.figma.com）获取设计上下文、截图、变量与资源，并按固定流程把节点落地为项目代码。文中核实了安装方式（$skill-installer / 目录拷贝）、Codex 的 MCP 配置（FIGMA_OAUTH_TOKEN、RMCP client）、必走工具链（get_design_context → get_metadata → get_screenshot）以及链接驱动的提示词写法，适合在 Codex、Cursor、Claude Code 中做设计到代码协作的开发者。
阅读全文figma-create-design-system-rules：给 Agent 写一套项目专属设计系统规则
介绍 openai/skills 策展目录中的 figma-create-design-system-rules：在已连接 Figma MCP 的前提下，分析代码库并生成项目级设计系统规则，约束组件路径、Design Token、样式方案与 Figma-to-code 流程，分别写入 CLAUDE.md、AGENTS.md 或 .cursor/rules/figma-design-system.mdc，缓解 AI 落地 UI 时乱用间距、硬编码颜色、重复造组件等问题。文中核实安装方式、五步工作流与注意事项。
阅读全文用 figma-generate-design 把页面从代码反向生成到 Figma
介绍 OpenAI curated 与 Figma MCP 生态中的 figma-generate-design Skill：在已连接 Figma MCP、目标文件具备设计系统的前提下，把应用页面或多区块布局按组件实例与 Token 写入 Figma，并强制配合 figma-use。文中核实了插件安装（Cursor / Claude Code / Codex）、npx skills 安装方式、按区块组装与 generate_figma_design 并行校准等官方流程，以及与 figma-implement-design、Code Connect 等相邻 Skill 的边界。
阅读全文